<template>
    <div class="dialog">
        <el-dialog :title="titleText" :visible.sync="dialogFormVisible" width="40%" @close="close">
            <div class="form">
                <el-form :model="form">
                    <el-form-item label="申请资料" :label-width="formLabelWidth">
                        <el-upload class="upload-demo" action="http://134.175.252.64:8080/file/upload/"
                            :on-success="handleSuccess" :before-remove="beforeRemove" multiple :limit="2"
                            :file-list="fileList">
                            <el-button type="primary" size="small">上传资料</el-button>
                            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="申请说明" :label-width="formLabelWidth" v-if="type == 0">
                        <el-input v-model="form.apyExplain" type="textarea" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="申请项目" :label-width="formLabelWidth" v-if="type == 1">
                        <el-input v-model="form.apyExplain" type="textarea" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'Dialog',
    components: {

    },
    mixins: [],
    props: ['type'],
    data() {
        return {
            titleText: '贫困户申请',
            dialogFormVisible: false,
            form: {
                apyExplain: '',
                apyMaterial: ''
            },
            formLabelWidth: '120px',
            fileList: [],
            fileUrl: '',
            fileName: ''
        }
    },
    computed: {
        ...mapState('userStore', ['userInfo'])
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('isShow', this.isShow)
        this.$bus.$on('editData', this.edit)
    },
    methods: {
        close() {
            this.form = {}
            this.fileList = []
        },
        isShow(value) {
            this.dialogFormVisible = value
            if (this.type == 0) {
                this.titleText = '贫困户申请'
            } else if (this.type == 1) {
                this.titleText = '贫困项目申请'
            }
        },
        edit(editData) {
            this.form = editData

        },
        ok() {
            // 判断 信息是否填写完整
            if (this.form.apyExplain == '' && this.form.apyMaterial == '') return this.$message({
                type: 'error',
                message: '请把信息填写完整'
            })
            let obj
            if (this.form.id) {
                obj = {
                    "id": this.form.id,
                    "apyExplain": this.form.apyExplain,
                    "apyMaterial": this.fileUrl,
                    "reviewStatus": 0,
                    "reviewExplain": '',
                    "userId": this.userInfo.userId,
                    "username": this.userInfo.username
                }
            } else {
                obj = {
                    "apyExplain": this.form.apyExplain,
                    "apyMaterial": this.fileUrl,
                    "reviewStatus": 0,
                    "reviewExplain": '',
                    "userId": this.userInfo.userId,
                    "username": this.userInfo.username
                }
            }
            if (this.type == 0) {
                this.request.post('/poorApplyInfo/orderAdit', obj).then(res => {
                    if (res.code == 20000) {
                        this.$emit('getApplyData')
                        this.$message({
                            type: 'success',
                            message: '已提交申请'
                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        })
                    }
                })
            } else if (this.type == 1) {
                this.request.post('/projectApplyInfo/orderAdit', obj).then(res => {
                    if (res.code == 20000) {
                        this.$emit('getApplyData')
                        this.$message({
                            type: 'success',
                            message: '已提交申请'
                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        })
                    }
                })
            }

            this.dialogFormVisible = false

        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleSuccess(response, file, fileList) {
            this.$set(this.fileList, 0, file)
            this.fileUrl = response.data.url
            this.fileName = file.name
        }

    },
    beforeDestroy() {
        this.$bus.$off(['isShow', 'editData'])
    }
};
</script>
<style lang='less' scoped>
.dialog {
    .form {
        padding: 0 80px 0 0;
    }

    .el-button--primary {
        background-color: #11a983;
    }

    .el-button--default:hover {
        color: #11a983;
        border-color: #11a983;
    }
}
</style>